<template>
	<view class="content">
		<view class="title">基础用法</view>
		<zm-tabs :activeKey="activeKeyStr" @change="changeKey" :list="list"></zm-tabs>
		<view class="title">下划线长度填满选项</view>
		<zm-tabs :activeKey="activeKeyStr" @change="changeKey" activeLineMode='full' :list="list"></zm-tabs>
		<view class="title">自定义下划线高度 字体大小颜色</view>
		<zm-tabs :activeKey="activeKeyStr" :style="{
			'--active-line-color' : 'red',
			'--active-line-height':'4px',
			'--active-title-color':'orange',
			'--title-font-size':'22px'
		}" @change="changeKey" :list="list"></zm-tabs>
		<!-- <button @click="changeSource">切换数据源</button>
		<button @click="changeKey">切换选中key</button> -->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				key:0,
				list:['orange','apple'].map((item, index) => ({
					title: item,
					key: `${index}`,
					// disabled: index % 2 == 0
				})),
				
				activeKeyStr:'0',

			}
		},
		
		methods: {
			
			
				
			changeKey(e){
				this.activeKeyStr = e;
				
			}
		}
	}
</script>

<style>
	
	.title {
		margin: 10px 0;
		text-align: left;
		padding-left: 20px;
	}

	
	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>